<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM元素获取</title>
</head>
<body>
    <img id="h1" src="../img/背景图1.jpg"> <br><br>
    <div class="cls">杰普软件</div> <br>
    <div class="cls">Java程序员</div> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏

    <script>
        // 根据元素的id属性，获取单个element元素
        var oImg = document.getElementById("h1");
        console.log(oImg);
        console.log(typeof oImg);

        // 根据元素的class属性，获取element数组
        var oDivs = document.getElementsByClassName("cls");
        console.log(oDivs);
        console.log(typeof oDivs);
        // 根据元素的标签名字，获取element数组
        var oInputs = document.getElementsByTagName("input");
        console.log(oInputs);
        // 根据元素的name属性，获取element数组
        var oInputsHobby = document.getElementsByName("hobby");
        console.log(oInputsHobby);
        console.log(oInputs == oInputsHobby);
        console.log(oInputs === oInputsHobby);

        // HTMLCollection vs NodeList 
        // 对比一下相同元素的不同访问形式，是否相同
        console.log(oInputs[0] == oInputsHobby[0]);
        console.log(oInputs[0] === oInputsHobby[0]);

        // 获取第二个div的element，修改其中的html
        oDivs[1].innerHTML = '<h1 style="color: red">996狂人</h1>';
    </script>
</body>
</html>